<template>
  <div class="insert">
    <el-form label-width="auto" class="text">
      <!-- <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item> -->
      <el-form-item label="咨询师名称" style="margin-top: 30px 0">
        <el-input v-model="name" placeholder="请输入咨询师名称" />
      </el-form-item>

      <el-form-item label="咨询师性别" style="margin-top: 30px 0">
        <el-input placeholder="请输入性别 男/女" v-model="sex" />
      </el-form-item>

      <el-form-item label="等级名" style="margin-top: 30px 0">
        <el-input
          placeholder="请输入等级名数字,1是1级，2是2级..."
          v-model="gradeName"
        />
      </el-form-item>
      <!-- <el-form-item label="所属领域" style="margin-top: 30px 0">
          <el-input placeholder="请输入所属领域" v-model="adept"/>
        </el-form-item> -->
      <el-form-item label="地址" style="margin-top: 30px 0">
        <el-input placeholder="请输入地址XX省XX市" v-model="address" />
      </el-form-item>
      <el-form-item label="咨询师简介" style="margin-top: 30px 0">
        <el-input type="textarea" v-model="introduce" />
      </el-form-item>
      <el-form-item label="咨询师状态" style="margin-top: 30px 0">
        <el-input placeholder="请输入咨询师状态" v-model="del" />
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script  setup>
import { ref } from "vue";
// import { ElMessage } from 'element-plus'
// import { Plus } from '@element-plus/icons-vue'
import { defineProps, defineEmits ,watch} from "vue";

const props = defineProps({
  data: {
    type: Object,
  },
});
const info = ref(props.data);
console.log(info.value);

// const imageUrl = ref(info.value.imageUrl);
const name = ref(info.value.zixunshiName);
const sex = ref(info.value.zixunshiSex);
const gradeName = ref(info.value.zixunshiGid);

//   const adept = ref(info.value.adept);
const address = ref(info.value.zixunshiAddress);
const introduce = ref(info.value.zixunshiIntroduce);
const del = ref(info.value.zixunshiDel);
const id = ref(info.value.zixunshiId);

// const handleAvatarSuccess= (res, file) => {
//   imageUrl.value = URL.createObjectURL(file.raw)
// }

// const beforeAvatarUpload=(rawFile) => {
//   if (rawFile.type !== 'image/jpeg') {
//     ElMessage.error('图片必须为jpg格式')
//     return false
//   } else if (rawFile.size / 1024 / 1024 > 2) {
//     ElMessage.error('图片大小不能超过2MB')
//     return false
//   }
//   return true
// }

const emites = defineEmits(["zixunshiData"]);
watch ([name,sex,gradeName,address,introduce,del,id],() => {
  emites("zixunshiData", {
    // imageUrl: imageUrl.value,
    zixunshiName: name.value,
    zixunshiGid: gradeName.value,
    zixunshiSex: sex.value,
    // adept: adept.value,
    zixunshiAddress: address.value,
    zixunshiIntroduce: introduce.value,
    zixunshiDel: del.value,
    zixunshiId: id.value,
  });
},{immediate:true});
</script>
  
  
  <style lang="less" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.insert {
  padding: 30px 10px;

  .text {
    font-weight: 700;

    .def {
      font-weight: 100;
    }

    /deep/ .el-select__wrapper {
      min-height: 35px;
    }

    .sel {
      width: 210px;
    }
  }
}
</style>